<template>
    <div class="container">
        <el-row class="h-60">
        </el-row>
        <el-row>
            <el-col :span="8">
            </el-col>
            <el-col :span="8" class="bg-primary-subtle p-10">
                <el-form :model="loginForm" class="login-container" label-position="left" label-width="80px"
                    v-loading="loading" status-icon>
                    <h4 class="text-center">系统登录</h4>
                    <el-form-item label="登录名">
                        <el-input v-model="loginForm.loginName" placeholder="登录名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item class="text-center">
                        <el-button type="primary" class="m-l-20" @click="toLogin()">Login</el-button>
                        <el-button type="Reset" class="m-l-20" @click="toReset()">Reset</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
//-路由对象
const router = useRouter()
//data
let loginForm = ref({
    code: "qmth",
    mobileNumber: "mobileNumber",
    type: "ACCOUNT",
    loginName: "",
    password: ""
});
function toLogin() {
    let url = "http://localhost:7810/api/admin/sys/user/login";
    //post()请求部分	
    axios.post(url, {
        code: loginForm.value.code,
        mobileNumber: loginForm.value.mobileNumber,
        type: loginForm.value.type,
        loginName: loginForm.value.loginName,
        password: loginForm.value.password
    })//服务响应后，调用的函数  response 响应对象
        .then(function (response) {
            //response.data 响应正文
            console.log(response.data);
            //判断服务器响应状态 200成功  422失败
            if (response.status == 200) {
                //1、记录登录状态  sessionStorage 
                //存储在浏览器的缓存中，超时或浏览器关闭 数据丢失
                //存：sessionStorage.setItem("自定义键",值)
                //取： sessionStorage.getItem("自定义键")
                //sessionStorage.setItem("user_token",response.data.access_token)
                sessionStorage.setItem("Authorization", true)
                //登录成功到首页
                router.push("/home")
            }
        })//请求异常处理
        .catch(function (error) {
            console.log(error);
        });
}
function toReset() {
    loginForm.value.loginName = ""
    loginForm.value.password = ""
}
</script>
<style>
.h-60 {
    height: 60px;
}

.p-10 {
    padding: 10px;
}
</style>